<template>
    <div class="login">
        <table width="920" height="600" border="0" align="center">
            <tr>
                <td height="100"></td>
            </tr>
            <tr>
                <td height="400">
                    <div align="center">
                        <form method="post">
                            <div style='background: #1188aa; algin:center;border-radius: 6px;width:400px;color:#ffffff'>
                                <br>
                                <table width="90%" border="0">
                                    <tr>
                                        <td height="35" style='color:#ffffff;'>
                                            <div align="center"><Strong>用户登录</Strong></div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="35">
                                            <div align="center">
                                                <label style='color:#ffffff'>账号:
                                                    <input name="username" v-model="user.username" id="user"
                                                        size="20" />
                                                </label>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="30">
                                            <div align="center" style='color:#ffffff'>密码:
                                                <label>
                                                    <input type="password" name="password" v-model="user.password" size="20" />
                                                </label>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="40">
                                            <div align="center">
                                                <label>
                                                    <input type="button" value="登录" @click="subForm" />
                                                </label>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                                <br>
                            </div>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                        </form>
                    </div>
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>
        </table>
    </div>
</template>

<script>
import requests from '@/api/request';
export default {
    data() {
        return {
            user: {
                username: "",
                password: "",
            }
        }
    },
    methods: {
        subForm() {
            let {username,password}=this.user;
            requests({
                method: 'post',
                url: '/user/login',
                data: {
                    username,password
                }
            }).then(res=>{
                if(res.data==true){
                    window.localStorage.setItem("user",JSON.stringify(this.user));
                    this.$router.push({
                        name:"home",
                    })
                }else{
                    alert(res.msg);
                }
            });

        },
        getStorage(name="user"){
            return JSON.parse(window.localStorage.getItem(name));
        },
    },
    created(){
        this.user=this.getStorage()||{};
    }
}
</script>